<query-editor-row query-ctrl="ctrl" class="generic-datasource-query-row" has-text-edit-mode="true">
  <div class="gf-form-inline">
    <div class="gf-form max-width-8">
      <select class="gf-form-input" ng-model="ctrl.target.type" ng-options="f as f for f in ['table', 'timeserie']"></select>
    </div>
    </div>
  </div>

  <div class="gf-form-inline">
      <div class="gf-form">
        <span class="gf-form-label query-keyword width-9">
          &nbsp;&nbsp;Namespace
          <info-popover mode="right-normal">
            名字空间,表明监控数据所属产品,如"acs_ecs_dashboard","acs_rds_dashboard";支持自定义监控指标:acs_custom_$uid;日志监控指标:acs_logMonitor_$uid.
          </info-popover>
        </span>
        <gf-form-dropdown model="ctrl.target.project"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getProjects(true)"
          on-change="ctrl.onChangeInternal()"
          css-class="gf-size-auto">
        </gf-form-dropdown>
      </div>

      <div class="gf-form">
        <span class="gf-form-label query-keyword width-8">
          Metric
          <info-popover mode="left-normal">
            监控项名称,例如cpu_total、cpu_other.
          </info-popover>
        </span>
        <gf-form-dropdown model="ctrl.target.metric"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getMetrics(true)"
          on-change="ctrl.onChangeInternal()"
          css-class="gf-size-auto">
        </gf-form-dropdown>
      </div>

      <div class="gf-form">
        <span class="gf-form-label query-keyword width-8">
          Period
          <info-popover mode="left-normal">
            时间间隔,统一用秒数来计算,例如60,300,900.如果不填写,则按照注册监控项时申明的上报周期来查询原始数据.如果填写统计周期,则查询对应的统计数据.
          </info-popover>
        </span>
        <gf-form-dropdown model="ctrl.target.period"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getPeriod()"
          on-change="ctrl.onChangeInternal()"
          css-class="gf-size-auto">
        </gf-form-dropdown>
      </div>

      <div class="gf-form " >
        <span class="gf-form-label query-keyword width-8">
          Group
          <info-popover mode="left-normal">
            云监控应用分组.
          </info-popover>
        </span>
        <gf-form-dropdown model="ctrl.target.group"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getGroups()"
          on-change="ctrl.onChangeInternal()"
          css-class="gf-size-auto">
           
        </gf-form-dropdown>
      </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label query-keyword width-9">
        &nbsp;&nbsp;Dimensions
        <info-popover mode="right-normal">
          监控数据维度.样例:{"instanceId":"xx-xxxx";"device":"/xx/xx"},{"instanceId":"xx-xxxx";"state":"xxx"},{"instanceId":"xx-xxxx";"port":"xx";"vip":"0.0.0.0"}
        </info-popover>
      </span>
      <gf-form-dropdown model="ctrl.dimensions"
        allow-custom="true"
        lookup-text="true"
        get-options="ctrl.getDimensions()"
        on-change="ctrl.dimensionsPush(ctrl.dimensions)"
        css-class="gf-size-auto">
      </gf-form-dropdown>
    </div>

    <div class="gf-form">
      <div ng-show="ctrl.target.dimensions != []" class="gf-form-label query-part" 
        ng-repeat="dimension in ctrl.target.dimensions track by $index">
          <a>{{dimension}}</a>
          <span class="pointer fa fa-remove" style="color:firebrick;" ng-click="ctrl.dimensionsSplice(dimension)"></span>
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
      <div class="gf-form">
        <span class="gf-form-label query-keyword width-9">
          &nbsp;&nbsp;Y - column 
          <info-popover mode="right-normal">
            统计目标,例如Average、Maximum.
          </info-popover>
        </span>
        <gf-form-dropdown model = "ctrl.statistics"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getStatistics()"
          on-change="ctrl.ycolPush(ctrl.statistics)" 
          css-class="gf-size-auto">
        </gf-form-dropdown>
      </div>

      <div class="gf-form">
        <div ng-show="ctrl.target.ycol != []" class="gf-form-label query-part" 
                      ng-repeat="ycol in ctrl.target.ycol track by $index">
          <a>{{ycol}}</a>
          <span class="pointer fa fa-remove" style="color:firebrick;" ng-click="ctrl.ycolSplice(ycol)"></span>
        </div>
      </div>
      <div class="gf-form">
        <span class="gf-form-label query-keyword width-8">
          X - column 
          <info-popover mode="right-normal">
            时间轴,默认timestamp.
          </info-popover>
        </span>
        <input type="text" class="gf-form-input width-7 ng-pristine ng-untouched ng-valid ng-empty" ng-model="ctrl.target.xcol"
              spellcheck="false" placeholder="x column name" ng-blur="ctrl.onChangeInternal()">
      </div>
      <div class="gf-form">
        <span class="gf-form-label query-keyword width-12">
            Y - column describe 
          <info-popover mode="right-normal">
            相同统计目标区分标识.
          </info-popover>
        </span>
        <input type="text" class="gf-form-input width-8 ng-pristine ng-untouched ng-valid ng-empty" ng-model="ctrl.target.describe"
              spellcheck="false" ng-blur="ctrl.onChangeInternal()">
      </div>
  </div>
</query-editor-row>
